<template>
    <div class="main">
      <div class="content">
        <transition :name="transform">
          <router-view keep-alive></router-view>
        </transition>
      </div>
      <div class="tab-wrapper">
        <div class="tab">
          <div class="tab-item">
            <router-link :to="{name: 'home'}">
              <i class="icon-fa-home"></i>
              <span>房源</span>
            </router-link>
          </div>
          <div class="tab-item">
            <router-link :to="{name: 'push'}">
              <i class="icon-fa-plus-circle"></i>
              <span>发布</span>
            </router-link>
          </div>
          <div class="tab-item">
            <router-link :to="{name: 'user'}">
              <i class="icon-fa-user-o"></i>
              <span>我的</span>
            </router-link>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        transform: 'router-fade'
      }
    },
    watch: {
      '$route'(to, from) {
        if(from.meta.index > to.meta.index) {
          this.transform = 'tran-left'
        }else{
          this.transform = 'tran-right'
        }
      }
    }
  }
</script>

<style lang="stylus">
.main
  height: 100%
  width: 100%
  overflow-x: hidden
  >.content
    min-height: 100%
    margin-bottom: 2rem
  >.tab-wrapper
    position: fixed
    width: 100%
    bottom: 0
    .tab
      display: flex
      height: 2rem
      border-top: 1px solid #eee
      box-shadow: 0 0 2px #eee
      overflow: hidden
      background: white
      .tab-item
        flex: 1
        text-align: center
        a
          display: inline-block
          width: 100%
          height: 100%
          vertical-align: top
          line-height: .8rem
          font-size: 0.56rem
          color: rgb(77 85 93)
          &.active
            transform: scale(1.1)
            color: rgb(240 20 20)
          >i
            display: block
            font-size: 1rem
            margin: .3rem 0 .08rem 0
          >span
            font-size: .4rem
            vertical-align: top
</style>
